import React, { Component } from 'react'
import {Link,Router, Route} from 'react-router-dom'
import './App.css'
import Home from './components/Home'
import About from './components/About'
/* 
   本小节是React路由的入门篇
   之前我们做的demo其实都是功能比较简单，无需页面跳转的项目
   但实际企业开发中，一个网站肯定是有多个功能，涉及到多个功能页之间的跳转的
   所以本小节将引入由React官方维护的路由库 React-Router-Dom
    关于React路由实现的原理其实也比较清晰：
    （1）使用<Link>等标签实现对浏览器path的操作(本质上是对BOM对象的history进行操作)
    （2）当前端路由器检测到浏览器的path发生了变化，就会到路由中对新的路径进行匹配
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <Link class="list-group-item" to='/about'>About</Link>
                            <Link class="list-group-item" to='/home'>Home</Link>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
